<!DOCTYPE html>
<html>
	<head>
		<!-- 
			This carousel example is created with jQuery and the carouFredSel-plugin.
			http://jquery.com
			http://caroufredsel.frebsite.nl
		-->

		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<meta name="description" value="This example shows a responsive, full window width image slider, centering a variable number of visible images and truncating the first and the last images inside the carousel. Resize your browser and watch the carousel adapt to its new size." />
		<meta name="keywords" value="responsive, slider, carousel, example, truncate, image" />
		<title>Responsive slider truncating the first and last images</title>

		<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
		<script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function() {

				$('#carousel').carouFredSel({
					width: '100%',
					items: {
						visible: '+1'
					},
					auto: {
						items: 1
					},
					prev: '#prev',
					next: '#next'
				});

			});
		</script>
		<style type="text/css">
			html, body {
				height: 100%;
				padding: 0;
				margin: 0;
			}
			body {
				min-height: 300px;
				position: relative;
			}
			body h3 {
				font-family: Arial, Geneva, SunSans-Regular, sans-serif;
				font-size: 20px;
				text-align: center;
				color: #999;
				margin: 0;
				padding-top: 50px;
			}
			body * {
				font-family: Arial, Geneva, SunSans-Regular, sans-serif;
				font-size: 14px;
				color: #333;
				line-height: 22px;
			}

			#wrapper, #prev, #next {
				border-top: 1px solid #999;
				border-bottom: 1px solid #999;
				height: 170px;
				position: absolute;
				top: 50%;
				margin-top: -85px;
			}
			#wrapper {
				width: 90%;
				left: 5%;
				overflow: hidden;
				box-shadow: 0 0 10px #ccc;
			}

			#carousel img {
				margin: 10px 5px;
				border: none;
				display: block;
				float: left;
			}
			
			#prev, #next {
				background: center center no-repeat #ccc;
				width: 5%;
			}
			#prev:hover, #next:hover {
				background-color: #bbb;
			}
			#prev {
				background-image: url( img/gui-prev.png );
				left: 0;
			}
			#next {
				background-image: url( img/gui-next.png );
				right: 0;
			}
			
			#donate-spacer {
				height: 100%;
				margin-bottom: -70px;
			}
			#donate {
				border-top: 1px solid #999;
				width: 750px;
				padding: 50px 75px;
				margin: 0 auto;
				overflow: hidden;
			}
			#donate p, #donate form {
				margin: 0;
				float: left;
			}
			#donate p {
				width: 650px;
			}
			#donate form {
				width: 100px;
			}
		</style>
	</head>
	<body>
		<h3>Resize your browser.</h3>
		<div id="wrapper">
			<div id="carousel">
				<img src="img/dakar-1.jpg" alt="dakar-1" width="250" height="150" />
				<img src="img/dakar-2.jpg" alt="dakar-2" width="250" height="150" />
				<img src="img/dakar-3.jpg" alt="dakar-3" width="100" height="150" />
				<img src="img/dakar-4.jpg" alt="dakar-4" width="250" height="150" />
				<img src="img/dakar-5.jpg" alt="dakar-5" width="250" height="150" />
				<img src="img/dakar-6.jpg" alt="dakar-6" width="100" height="150" />
				<img src="img/dakar-7.jpg" alt="dakar-7" width="250" height="150" />
				<img src="img/dakar-8.jpg" alt="dakar-8" width="250" height="150" />
				<img src="img/dakar-9.jpg" alt="dakar-9" width="250" height="150" />
				<img src="img/dakar-10.jpg" alt="dakar-10" width="250" height="150" />
				<img src="img/dakar-11.jpg" alt="dakar-11" width="250" height="150" />
				<img src="img/dakar-12.jpg" alt="dakar-12" width="100" height="150" />
				<img src="img/dakar-13.jpg" alt="dakar-13" width="250" height="150" />
				<img src="img/dakar-14.jpg" alt="dakar-14" width="250" height="150" />
				<img src="img/dakar-15.jpg" alt="dakar-15" width="100" height="150" />
			</div>
		</div>
		<a id="prev" href="#"></a>
		<a id="next" href="#"></a>
		
		<div id="donate-spacer"></div>
		<div id="donate">
			<p>This carousel-example is created for your inspiration, you may use it for free in all of your projects.<br />
				If you like it, please help me &quot;keep up the good work&quot; and donate.</p>
			<form id="c-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post">
				<input type="hidden" name="cmd" value="_s-xclick" />
				<input type="hidden" name="hosted_button_id" value="ENVLWPR4QMU3U" />
				<input type="image" src="https://www.paypalobjects.com/en_US/NL/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
				<img alt="" border="0" src="https://www.paypalobjects.com/nl_NL/i/scr/pixel.gif" width="1" height="1" />
			</form>
		</div>
	</body>
</html>